    <%--
      Created by IntelliJ IDEA.
      User: lenovo
      Date: 2024-01-05
      Time: 10:58
      To change this template use File | Settings | File Templates.
    --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>Title</title>
        <style>
            *{
                margin: 0;
                padding: 0;
                font-family: 宋体;
            }
            body{
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                height: 100%;
                background: url("img/img.png");
                background-size: cover;
            }
            .zhuti{
                width: 900px;
                height: 500px;
                display: flex;
                position: relative;
                border-radius: 10px;
                backdrop-filter: blur(10px);
                box-shadow: 0 40px 50px #000000;
            }
            .logon{
                width: 450px;
                height: 500px;
                display: flex;
                position: fixed;
                top: 0px;
                left: 0px;
                align-items: center;
                transition: all 1s ;
                flex-direction: column;
                justify-content: center;
                background-color: #ffffff;
                border-radius: 10px 0 0 10px;
            }
            .register{
                width: 450px;
                height: 500px;
                display: flex;
                align-items: center;
                flex-direction: column;
                justify-content: center;
            }
            .ann{
                width: 250px;
                height: 50px;
                color: #ffffff;
                cursor: pointer;
                position: fixed;
                top: 225px;
                left: 550px;
                line-height: 50px;
                text-align: center;
                background: #0072a1;
                border-radius: 50px;
                opacity: 1;
            }
            .dl{
                font-size: 40px;
                font-weight: bold;
                margin:0 0 15px 0;
            }
            input{
                width: 350px;
                height: 40px;
                margin-top: 15px;
            }
            a{
                text-decoration: none;
                color: #9d9d9d;
            }
            .a{
                margin-top: 25px;
            }
            .denli{
                width: 150px;
                height: 40px;
                color: #ffffff;
                margin-top: 30px;
                font-weight: bold;
                line-height: 40px;
                text-align: center;
                background: #0072a1;
                border-radius: 30px;
                cursor: pointer;
            }
            .zhuce{
                position: fixed;
                z-index: 1;
                opacity: 0;
            }
            .denlu{
                position: fixed;
                z-index: 2;
                opacity: 1;
            }
            .Code{
                width: 230px;
                height: 40px;
                margin-right: 10px;
                margin-top: 15px;
            }
            .btnCode{
                width: 110px;
                height: 40px;
                margin-top: 15px;
            }
            .a:hover{
                cursor: pointer;
            }
            select[name="role"]{
                width: 350px;
                height: 40px;
                margin-top: 15px;
            }
        </style>
    </head>
    <body>
    <div class="zhuti">
        <div class="logon">
            <div class="denlu">
                <form method="post" name="loginform" action="UsersServlet" onsubmit = "return check()">
                <div class="dl">欢迎登录</div>
                    <select name="role" id="role">
                        <option value="student">学生</option>
                        <option value="teacher">教师</option>
                    </select>
                <div><input type="text" placeholder="请输入邮箱" name="email" ></div>
                <div><input type="text" placeholder="请输入密码" name="upwd" ></div>
                <div class="a"><a href="forgot_passwordyz.jsp">忘记密码？</a></div>
                <input class="denli" type="submit" value="登录">
                </form>
            </div>
            <div class="zhuce">
                <div name="loginform">
                <div class="dl">欢迎注册</div><div><input type="text" placeholder="请输入您的常用邮箱" name="email" id="email" required></div>
                <div><input type="text" placeholder="请输入昵称" name="uname" required></div>
                <div><input type="text" placeholder="请输入密码" name="upwd" id="upwd" required></div>
                <div><input type="text" placeholder="请确认密码" name="upwd2" id="upwd2" required></div>
                <div><input type="text" maxlength="6" placeholder="请输入验证码" class="Code" name="Code"><button class="btnCode" id="btnCode" onclick="disableButton();">验证码</button></div>
                <input class="denli"  type="submit" onclick="checkPasswordMatch()" value="注册">
                </div>
            </div>
        </div>
        <div class="register">
            <div id="qhuanann" class="ann" onclick="doScroll(this)">没有账号？点击注册</div>
        </div>
    </div>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/jsEmail.js?v=2"></script>
    <script>
        // 当文档加载完成执行
        $(document).ready(function() {
            // 读取localStorage中的role值
            var role = localStorage.getItem('role');
            if (role) {
                // 设置下拉列表的值
                $('#role').val(role);
            }

            // 当下拉列表的值发生变化，保存选中的值到localStorage
            $('#role').change(function() {
                var role = $(this).val();
                localStorage.setItem('role', role);
            });
        });
    </script>
    <script>
        function doScroll(div) {
            let ddd = document.querySelector(".logon");
            let ann = document.querySelector(".ann");
            let denlu = document.querySelector(".denlu");
            let zhuce = document.querySelector(".zhuce");
            let logon = document.querySelector(".logon");
            let left = window.getComputedStyle(ddd, null).left;
            left = parseInt(left);
            let timer;
            let i = 1;
            let text = ann.textContent;
            if(text==="没有账号？点击注册"){
                denlu.style.display="none";
                zhuce.style.display="block";
                timer = setInterval(function () {
                    if (i === 1) {
                        let opacity = 0;
                        let yincang = 1;
                        left += 225;
                        ddd.style.left = left + 'px';
                        ann.style.left = 100 + 'px';
                        let fadeInTimer = setInterval(function () {
                            opacity += 0.01;
                            yincang -= 0.01;
                            ddd.style.opacity = opacity;
                            denlu.style.opacity = yincang;
                            logon.style.borderRadius = 0;
                            if (opacity >= 1) {
                                clearInterval(fadeInTimer);
                            }
                        }, 5);
                        ddd.style.opacity = 0;
                        i++;
                    } else {
                        let opacity = 0;
                        left += 225;
                        ddd.style.left = left + 'px';
                        let fadeInTimer = setInterval(function () {
                            opacity += 0.01;
                            ddd.style.opacity = opacity;
                            zhuce.style.opacity = opacity;
                            logon.style.borderRadius="0 10px 10px 0";
                            ann.textContent = "点击前去登录";
                            if (opacity >= 1) {
                                clearInterval(fadeInTimer);
                            }
                        }, 5); // 控制淡入的速度
                        clearInterval(timer);
                    }
                },10);
            }else{
                denlu.style.display="block";
                zhuce.style.display="none";
                timer = setInterval(function () {
                    if (i === 1) {
                        let opacity = 0;
                        let yincang = 1;
                        left -= 225;
                        ddd.style.left = left + 'px';
                        ann.style.left = "550px";
                        let fadeInTimer = setInterval(function () {
                            opacity += 0.01;
                            yincang -= 0.01;
                            ddd.style.opacity = opacity;
                            zhuce.style.opacity = yincang;
                            logon.style.borderRadius = 0;
                            if (opacity >= 1) {
                                clearInterval(fadeInTimer);
                            }
                        }, 5);
                        ddd.style.opacity = 0;
                        i++;
                    } else {
                        let opacity = 0;
                        left -= 225;
                        ddd.style.left = left + 'px';
                        let fadeInTimer = setInterval(function () {
                            opacity += 0.01;
                            ddd.style.opacity = opacity;
                            denlu.style.opacity = opacity;
                            logon.style.borderRadius="10px 0 0 10px";
                            ann.textContent = "没有账号？点击注册";
                            if (opacity >= 1) {
                                clearInterval(fadeInTimer);
                            }
                        }, 5); // 控制淡入的速度
                        clearInterval(timer);
                    }
                },10);
            }
        }
    </script>
    </body>
    </html>
